<template>
    <el-image
        v-if="cellValue"
        :hide-on-click-modal="true"
        :preview-teleported="true"
        :preview-src-list="[cellValue]"
        :src="cellValue"
        class="aa-table-render-image"
    >
        <template #error>
            <Icon color="#909399" size="32" name="fa fa-image"></Icon>
        </template>
    </el-image>
</template>
<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import { getCellValue } from '/@/components/table/index'

interface Props {
    row: TableRow
    field: TableColumn
    column: TableColumnCtx<TableRow>
    index: number
}

const props = defineProps<Props>()

const cellValue = getCellValue(props.row, props.field, props.column, props.index)
</script>
<style lang="scss" scoped>
.aa-table-render-image {
    width: 36px;
    height: 36px;
}
</style>
